<template>
  <div class="app">
    <el-input v-model="phone" placeholder="请输入手机号"></el-input>
    <el-input v-model="password" placeholder="请输入密码"></el-input>
    <el-row>
      <el-col :span="16">
        <div class="grid-content bg-purple-dark">
          <el-input v-model="checkCode" placeholder="请输入验证码" :span="6"></el-input>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-dark" style="padding-top: 9px;">
          <captcha></captcha>
        </div>
      </el-col>
    </el-row>
    <el-button @click="login" :loading="flg">登录</el-button>
  </div>
</template>
<script type="text/ecmascript-6">
import captcha from "../captcha/captcha";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      phone: "2810201146@qq.com",
      password: "zhou24272592",
      checkCode: "BCAXA",
      msg: "",
      flg: false
    };
  },
  methods: {
    ...mapMutations([
      "UserUpdata", // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      "setRouterList"
    ]),
    login() {
      if (this.phone.indexOf("@") != -1 || this.phone.indexOf(".") != -1) {
        if (!this.IFemail(this.phone)) return;
      } else {
        if (!this.IFphone(this.phone)) return;
      }
      if (this.checkCode == "") return;
      this.flg = true;

      this.$api.userAPI
        .ifVerify({
          code: this.checkCode,
          key: this.$store.state.userDATA.codeKey
        })
        .then(res => {
          let data = res.data;
          if (data.state) {
            this.$api.userAPI
              .login({
                username: this.phone,
                password: this.password
              })
              .then(res => {
                this.flg = false;
                if (res.data.token) {
                  this.msgbox(res.data.msg, 1);

                  this.UserUpdata({
                    name: this.phone,
                    token: res.data.token,
                    isroles: true
                  });
                  
                  localStorage.setItem("token", res.data.token);
                  this.$store.commit("userRolesUpdata", "user"); //模拟axios请求用户roles身份
                  this.$router.go(-1);
                } else {
                  this.msgbox(res.data.msg, 2);
                }
              });
          } else {
            this.msgbox(res.data.msg, 2);
            this.flg = false;
          }
        });
    }
  },
  components: {
    captcha: captcha
  }
};
</script>
<style scoped >
</style>

